<template>
  <div id="MobileLogin" class="mobile">
    <mt-header title="登录">
    </mt-header>


    <mt-field 
      label="用户名" 
      placeholder="用户名" 
      v-model="loginInfo.username" 
      state="">
    </mt-field>

    <mt-field 
      label="密码" 
      placeholder="密码" 
      v-model="loginInfo.password" 
      ref="password"
      state=""
      type="password"
      @keyup.enter.native="commit()">
    </mt-field>

    <mt-field 
      label="验证码" 
      placeholder="验证码" 
      v-model="loginInfo.captcha" 
      ref="captcha"
      state=""
       v-if="loginInfo.requiredCaptcha" 
      @keyup.enter.native="commit()">
    </mt-field>

    <img
      style="width: 80%;float:right; height: 50px;"
      title="点击刷新"
      ref="img"
      @click="reloadCaptcha()"
      v-show="loginInfo.requiredCaptcha"
      >
    <div >
      <div class="margin-left-xl" style="margin-top: 20px">
      <mt-button type="danger" @click.native="login" ref="login" class="pointer" id='pc'>
        <span slot="icon" :class="commiting ? 'fa fa-spinner fa-spin' : 'fa fa-check'"></span> 登录(电脑版)
      </mt-button>
      
      <mt-button type="primary" @click.native="login" ref="login" class="pointer margin-left-xl" id='pda'>
        <span slot="icon" :class="commiting ? 'fa fa-spinner fa-spin' : 'fa fa-check'"></span> 登录(PDA版)
      </mt-button>
      </div>
      <div class="message" v-show="message">
        <mt-cell title="">
          <span :style="'color: ' + messageColor">{{m(message)}}</span>
        </mt-cell>
      </div>
    </div> 
  </div>
</template>

<script>
import Vue from 'vue'; 
import * as constant from '@/store/yg/common/constant'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

import {m} from "@/store/yg/common/local"

export default {
  props: [
  　　'loginInfo', 'login'
　],
  data() {
    return {
      commiting: false,
      message: '',
      messageColor: 'green'
    }
  },
  computed: {
    captchaJpg() {
      return constant.API_SERVER + '/lib/images/kaptcha.jpg';
    },
  },
  methods: {
    reloadCaptcha() {
        var newImg = new Image;
        var self = this;
        newImg.onload = function() {
          if (this.width) {
            self.loginInfo.requiredCaptcha = true;
            if (self.$refs.img) {
              self.$refs.img.src = this.src;
            }
          }
        }
        newImg.src = this.captchaJpg + "?" + Math.random();
        this.loginInfo.captcha = '';
    },
    commit() {
    },
    clearError() {
    },
    m(key) {
      return m(key);
    },
    init(res) {
        this.loginInfo.username = res.loginName;
        this.loginInfo.password = res.token;
        this.$refs['login'].$el.click();
    }
  },
  mounted() {
    if (this.$route.query.token) {
        this.$store.dispatch('userToken', {token: this.$route.query.token, callback: this.init});
    }

    this.reloadCaptcha();
    //this.$store.dispatch('switchColor', this.$store.state.auth.user.color);
  }
}
</script>
<style scoped>
.mobile {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
}
</style>